<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fireworks with Heart Shape</title>
<style>
  body {
    margin: 0;
    overflow: hidden;
    background-color: black;
  }
  canvas {
    display: block;
  }
</style>
</head>
<body>
<canvas id="fireworksCanvas"></canvas>
<script src="index.umd.js"></script> <!-- 假设这是fireworks-js的CDN链接 -->
<script>
window.onload = function(){
// 获取画布和上下文
const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 初始化fireworks-js
const fireworks = new Fireworks.default(canvas,{
  canvas: canvas,
  particleCount: 100, // 粒子数量
  color: '#FF69B4', // 烟花颜色（这里设置为粉色，但你可以根据需要调整）
  blastRadius: 50, // 爆炸半径
  duration: 3000, // 烟花持续时间
  gravity: 0.1, // 重力影响
});

// 自定义烟花爆炸形状为爱心
fireworks.customBlastShape = function(index, totalParticles) {
  const r = 60; // 爱心半径
  const m = index; // 粒子索引
  const n = -r * (((Math.sin(m) * Math.sqrt(Math.abs(Math.cos(m)))) / (Math.sin(m) + 1.4)) - 2 * Math.sin(m) + 2); // 爱心曲线公式
  const x = n * Math.cos(m); // 转换回笛卡尔坐标系的x值
  const y = n * Math.sin(m); // 转换回笛卡尔坐标系的y值
  return {
    x: canvas.width / 2 + x, // 爱心中心位于画布中央
    y: canvas.height / 2 - y, // 爱心方向向上调整
  };
};

// 触发烟花（例如，在点击时）
canvas.addEventListener('click', function(event) {
  const x = event.clientX;
  const y = event.clientY;
  fireworks.start();
  fireworks.explode({
    x: x,
    y: y,
    blastShape: 'custom', // 使用自定义爆炸形状
  });
});
}

// fireworks-js的Fireworks类可能不包含上述所有属性或方法，这只是一个示例。
// 你需要根据fireworks-js的实际API进行调整。
// 如果fireworks-js不支持自定义爆炸形状，你可能需要自行实现这部分逻辑。

// 注意：上述代码中的`Fireworks`类和相关方法（如`explode`）是假设的，
// 因为`fireworks-js`的具体实现细节可能有所不同。
// 你需要参考`fireworks-js`的官方文档或源代码来了解如何正确使用它。

// 如果`fireworks-js`没有提供自定义爆炸形状的功能，
// 你可以考虑在烟花爆炸后，使用Canvas API手动绘制爱心形状。
// 这通常涉及到在烟花爆炸的位置绘制一系列的点，并通过调整这些点的位置来形成爱心形状。
</script>
</body>
</html>
